<template>
	<view class="ticket">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<!-- <image src="../../../static/img/bg.jpg" mode="widthFix"></image> -->
		<view class="content">
			<view v-if="current === 0">
				<view class="addActivity">
					<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
						<uni-forms-item label="类型" :label-width='width'>
							<uni-easyinput v-model="baseFormData.name" placeholder="请输入直播名称" disabled
								:disableColor="color" />
						</uni-forms-item>

						<uni-forms-item label="面值" :label-width='width'>
							<uni-easyinput v-model="baseFormData.faceValue" placeholder="请输入金额" />
						</uni-forms-item>

					<!-- 	<uni-forms-item label="商户" :label-width='width'>
							<uni-easyinput v-model="baseFormData.shopname" placeholder="请输入商户名称" />
						</uni-forms-item> -->
						<uni-forms-item label="地址" :label-width='width'>
							<uni-easyinput v-model="baseFormData.address" placeholder="请输入商户地址" />
						</uni-forms-item>
					<!-- 	<uni-forms-item label="有效期" :label-width='width'>
							<picker mode="date" :value="startdate" @change="startDateChange">
								<view class="uni-input">{{startdate}}</view>
							</picker>
						</uni-forms-item> -->
						<uni-forms-item label="有效期" :label-width=width>
							<picker mode="date" :value="startdate" @change="startDateChange">
								<view class="uni-input">{{startdate}}</view>
							</picker>
							-
							<picker mode="date" :value="enddate" :start="threeDays" @change="endDateChange">
								<view class="uni-input">{{enddate}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="限制" :label-width='width'>
							<uni-easyinput type="textarea" v-model="baseFormData.usage" placeholder="20字以内" />
						</uni-forms-item>
					</uni-forms>
					<view class="register-btn" @click="submit()">提交保存</view>

				</view>
			</view>
			<view v-if="current === 1">
				<view class="welfare" v-for="(item,index ) in welfareList" :key="index">
					<view class="title">
						<text>类型</text><text class="nr">{{item.name}}</text>
					</view>
					<view class="title">
						<text>面值</text> <text class="nr">{{item.faceValue}}</text>
					</view>
					<view class="title">
						<text>限制</text><text class="nr"> {{item.usage}}</text>
					</view>
					<!-- <view class="title">
						<text>商户</text> <text class="nr">{{item.liveAccount}}</text>
					</view> -->
					<view class="title">
						<text>地址</text> <text class="nr">{{item.address}}</text>
					</view>
					<view class="title">
						<text>有效期</text> <text class="nr">{{item.endDate}}</text>
					</view>
					<view class="btn">
						<button class="remove" v-if="item.status==0">已下架</button>
						<button class="release" v-if="item.status==1">已发布</button>
						<button class="remove" v-if="item.status==1" @click="publicFun(item,0)">下架</button>
						<button class="release" v-if="item.status==0" @click="publicFun(item,1)">发布</button>
						
						
						
					<!-- 	<text class="release" v-if="item.status==1">已发布</text>
						<text class="release" v-if="item.status==0" @click="publicFun(item,1)">发布</text>
						<text class="remove" v-if="item.status==1" @click="publicFun(item,0)">下架</text>

						<text class="remove" v-if="item.status==0">已下架</text> -->
					</view>


				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	const current = ref(0)
	const width = ref(90)
	const color = ref('#fff')
	const items = ref(['新增券', '已添加券'])
	const startdate = ref('开始日期')
	const enddate = ref('结束日期')
	const threeDays = ref()
	// const startdate = ref('请选择日期')
	const baseFormData = ref({
		name: '通用券',
		faceValue: '',
		shopname: '',
		address: '',
		date: '',
		// liveAccount: '',
		usage: ''
	})
	const welfareList = ref([])
	onMounted(() => {
		getList()

	})
	onLoad(options => {
		if (proxy.sjuBase.isNull(proxy.sjuLogin.getValue('xndz_mobile'))) {
			proxy.sjuNav.navigateTo('/intake/login')
		}
	
	})
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
	const startDateChange = (e) => {
	console.log(e)
	startdate.value = e.detail.value
	baseFormData.value.startdate = e.detail.value
	threeDays.value = e.detail.value
	}
	const endDateChange = (e) => {
		console.log(e)
		enddate.value = e.detail.value
		baseFormData.value.enddate = e.detail.value
	}
	const submit = () => {
		console.log(proxy.sjuLogin.getValue("xndz_merchantCode"))

		//检查非空数组:
		let checkNullArr = [{
			val: baseFormData.value.name,
			msg: '请输入优惠券类型'
		}, {
			val: baseFormData.value.faceValue,
			msg: '请输入金额'
		},
		// {
		// 	val: baseFormData.value.shopname,
		// 	msg: '请输入商户名称'
		// }, 
		{
			val: baseFormData.value.address,
			msg: '请输入商户地址'
		}, {
			val: baseFormData.value.startdate,
			msg: '请选择开始日期'
		}, {
			val: baseFormData.value.enddate,
			msg: '请选择结束日期'
		}, {
			val: baseFormData.value.usage,
			msg: '请选择使用限制'
		}];
		if (proxy.sjuBase.checkArrayNotNull(checkNullArr)) {
			proxy.sjuRequest.request("/api/shanghu/addCoupon/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"name": baseFormData.value.name,
				"faceValue": baseFormData.value.faceValue,
				"expirationDate": baseFormData.value.date,
				"startDate": baseFormData.value.startdate,
				"endDate": baseFormData.value.enddate,
				// "liveAccount": baseFormData.value.shopname,
				"usage": baseFormData.value.usage,
				"userCode": proxy.sjuLogin.getValue("xndz_merchantCode"),
				"address":baseFormData.value.address
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					// msgOrderNo.value = res.msgOrderNo;
					proxy.sjuAlert.showInfo('保存成功', 2000)
					startdate.value = ''
					baseFormData.value.faceValue = ''
					// baseFormData.value.shopname = ''
					baseFormData.value.address = ''
					baseFormData.value.date = ''
					baseFormData.value.usage = ''
					baseFormData.value.startdate = ''
					baseFormData.value.enddate = ''
					startdate.value = '请选择开始日期'
					enddate.value='请选择结束日期'
					getList()
				} else {
					// proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}
	}
	const getList = () => {
		console.log(proxy.sjuLogin.getValue("xndz_merchantCode"))
		proxy.sjuRequest.request("/api/shanghu/getShangHuCouponList/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"shangHuCode": proxy.sjuLogin.getValue("xndz_merchantCode")
		}).then(res => {
			console.log(res)
			if (res.code == "0000") {
				welfareList.value = res.data
				console.log(welfareList.value)

			} else if (res.code == "0001") {
				proxy.sjuAlert.showError(res.msg);
			} else {

			}
		})
	}
	const publicFun = (item, index) => {
		proxy.sjuRequest.request("/api/shanghu/changeCoupon/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"id": item.id,
			"status": index
		}).then(res => {
			console.log(res)
			if (res.code == "0000") {
				proxy.sjuAlert.showError('您发布的券已经在平台下架成功');
				getList()

			} else if (res.code == "0001") {
				proxy.sjuAlert.showError(res.msg);
			} else {

			}
		})
	}
</script>

<style lang="scss" scoped>
	.ticket {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
		}

		.content {

			// width: 90%;
			// height: 450px;
			// padding: 10px;
			// box-sizing: border-box;
			// background-color: #fff;
			// border-radius: 20px;
			// position: absolute;
			// top: 10%;
			// left: 5%;
			// z-index: 99;
			.addActivity {
				width: 94%;
				height: 480px;
				padding: 10px;
				margin: 10px 3%;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20px;
				// position: absolute;
				// top: 10%;
				// left: 5%;
				// z-index: 99;
			}

			.model {
				display: flex;
				justify-content: flex-end;
				color: #0091ff;
				margin-bottom: 10px;


			}
		}

		.register-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			height: 100rpx;
			margin: 40rpx 0 40rpx 0;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-image: linear-gradient(to right, #191765, #0b0a35);
		}

		::v-deep {
			.is-input-border {
				border: none
			}

			.uni-forms-item__content {
				background: #f6f7fb;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				uni-picker {
					width: 40%;
					text-align: center;
					color: #999;
				}

			}

			.uni-easyinput__content,
			.uni-easyinput__content-textarea,
			.uni-easyinput__content-input {
				border: none;
				background: #f6f7fb;

			}

			.uni-forms-item {
				// border-bottom: 1px solid #ccc;
			}

			.is-disabled {
				background-color: #fff !important;
				color: #0b0a35;
			}
		}

	}

	.welfare {
		width: 94%;
		height: auto;
		margin: 10px 3%;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 20px;
		padding: 10px 20px;
		box-sizing: border-box;

		.nav {
			font-size: 16px;
			font-weight: bold;
			font-weight: bold;
			line-height: 2;
		}

		.title {
			line-height: 35px;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			color: #4d4e51;

			text {
				flex-basis: 80px;
			}

			.nr {
				flex-grow: 1;
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			margin-top: 10px;

			button {
				font-size: 14px;
				height: 30px;
				line-height: 30px;
				width: 35%;
				margin: 0 7%;
				border-radius: 30px;
				color: #fff;
			}

			::v-deep uni-button:after {
				border: none !important;
			}

			.remove {
				background-image: linear-gradient(to right, #acd3fe, #73b1f5);
			}

			.release {
				background-image: linear-gradient(to right, #191765, #0b0a35);
			}
		}
	}
</style>